<template>
	<view>
		<image class="image-bg" :src="srcPerfect()"></image>
		<view class="page-bg">
			<form @submit="saveFormId">
				<view class="sub-bg">
					<view class="tip">手动认证，结识校友</view>
					<view class="section">
						<picker @change="bindDateChange" :end="maxDate" fields="year" mode="date" :value="date">
							<view class="address-bg">
								<view class="department" v-if="enterDate=='年份'">{{enterDate}}</view>
								<view class="address-normal" v-else>{{enterDate}}</view>
							</view>
						</picker>
					</view>

					<view class="section">
						<picker @change="selectCollege" :value="collegeName" :range="collegeNameList">
							<view class="address-bg">
								<view class="department" v-if="collegeName=='学院/部门'">{{collegeName}}</view>
								<view class="address-normal" v-else>{{collegeName}}</view>
							</view>
						</picker>
					</view>
					<view class="section" v-if="type == 1">
						<picker @change="selectMajorDepart" :value="majorDepartName" :range="majorDepartNameList">
							<view class="address-bg">
								<view class="department" v-if="majorDepartName=='所学专业'">{{majorDepartName}}</view>
								<view class="address-normal" v-else>{{majorDepartName}}</view>
							</view>
						</picker>
					</view>
					<view class="section">
						<input @input="inputBrief" placeholder="简介" placeholderClass="placeholder" name="brief" type="text" :value="brief"
						style="height: 30rpx;"></input>
					</view>

					<view class="section1">
						<text class="te">相关信息证件（学生证、毕业/学位证等）</text>
						<view class='add'>
							<view v-for="item in imgArr" :key="index">
								<image @click="imgYu" :data-list="item.path_server" :data-src="item.path_server" :src="item.path_server"></image>
							</view>
							<image v-if="imgArr.length < 3" src='../../static/images/fbu.jpg' @click='chooseImage' mode="aspectFit"></image>
						</view>
					</view>

					<view>
						<button style="margin-top: 20rpx" class="next" formType="submit">提 交</button>
					</view>
				</view>
			</form>
		</view>
	</view>
</template>


<script>
	let app = getApp();
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		computed:{
		   ...mapState(['openid', 'token'])
		},
		data() {
			return {
				type: 1,
				data: null, //当前时间
				maxDate: null, //入学最早年份
				brief:"天空中一粒尘土",
				enterDate: "年份", //入学年份
				chooseViewShow: true,
				ImgNumber: 3, //单次可选图片个数
				urls: [],				
				imgArr: [], //图片数组
				
				college: null, //所在学院
				collegeName: "学院/部门", //所在学院
				collegeList: [], //学院列表
				collegeNameList: [],//学院名字
				
				majorDepart: null, //所在专业
				majorDepartName: "所学专业", //所在专业
				majorDepartList: [], //专业列表
				majorDepartNameList: [], //专业列表
				
				tfanlt: null,  //备注描述
				index: null  //返回的ID
			}
		},
		computed: {
			...mapState(['nickName', 'avatarUrl', 'openid', 'gender', 'token'])
		},
		onLoad: function(options) {
			this.type = options.type;
			console.log("type:", this.type);
			//设置选则最大时间(当前年)
			let n = new Date().toISOString().slice(0, 4)
			console.log("year:", n)
			this.maxDate = n + "年"
		},
		methods: {
			...mapMutations(['setUser']),
			//入学年份
			bindDateChange(e) {
				console.log(e.detail.value);
				let that = this;
				that.date = e.detail.value;
				that.enterDate = e.detail.value;
				that.bindCollegeList(that.enterDate);				
			},
			//活动简介
			inputBrief(e) {
				let that = this
				// console.log(e)
				that.brief = e.detail.brief
			},

			srcPerfect:function(){
				return app.globalData.Link+'file/system/认证.jpg';
			},
			//根据年份获取学院列表
			async bindCollegeList(e){
				let that = this
				let url = "department/colleges"
				uni.request({
					url: app.globalData.URL + url,
					data: {
						year: e
					},
					method: "get",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: that.token
					},
					success(res) {
						console.log(res.data);
						that.collegeList = res.data;
						for (let i=0;i<res.data.length;i++)
							that.collegeNameList[i] = res.data[i].name;
					}
				})
			},			
			//选择学院
			selectCollege(e){
				console.log(e);
				let that = this;
				that.college = that.collegeList[e.detail.value];
				that.collegeName = that.collegeNameList[e.detail.value];
				console.log(that.college);				
				that.bindDepartList();
			},						
			//根据parentId(系部id)与入学年份获取专业列表
			async bindDepartList() {
				let that = this
				let url = "department/getMajorsList"
				uni.request({
					url: app.globalData.URL + url,
					data: {
						"nameId": that.college.id,
						"year": that.enterDate,
						"type": 2
					},
					method: "POST",
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						Authorization: that.token
					},
					success(res) {
						console.log(res.data);
						that.majorDepartList = res.data
						for (let i=0;i<res.data.length;i++)
							that.majorDepartNameList[i] = res.data[i].name;
					}
				})
			},
			//选择专业
			selectMajorDepart(e){
				console.log(e);
				let that = this;
				that.majorDepart = that.majorDepartList[e.detail.value];
				that.majorDepartName = that.majorDepartNameList[e.detail.value];
				console.log(that.majorDepartName);
				
			},			
			
			/** 选择图片 */
			chooseImage() {
				let that = this;
				let upload_picture_list = this.imgArr
				console.log(this.imgArr.length)
				if (this.imgArr.length == 3) {
					uni.showToast({
						title: "最多上传三张证件照",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				uni.chooseImage({
					count: this.ImgNumber - this.imgArr.length, //最多选择3张图片
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
					success: function(res) {
						let tempFiles = res.tempFiles
						for (let i in tempFiles) {
							tempFiles[i]['upload_percent'] = 0
							tempFiles[i]['path_server'] = ''
							upload_picture_list.push(tempFiles[i])
						}
						if (res.tempFilePaths.count == 0) {
							return;
						}
						//上传图片
						console.log("upload_picture_list:", upload_picture_list)
						that.imgArr = upload_picture_list
						//this.up_data(upload_picture_list); //data
						that.chooseViewShow1() //判断是否隐藏添加
						that.uploadFile(upload_picture_list); //开始上传
					}
				})
			},
			up_data(obj) {
				this.imgArr = obj
			},
			uploadFile(imgArr) {
				//循环把图片上传到服务器 并显示进度   
				for (let j in imgArr) {
					if (imgArr[j]['upload_percent'] == 0) {
						this.upload_file_server(imgArr, j)
					}
				}
			},

			upload_file_server(upload_picture_list, j) {
				//图片上传
				let that = this
				const uplyk = uni.uploadFile({
					url: app.globalData.Link + "api/message/uploadimg",
					filePath: upload_picture_list[j]['path'], //上传的文件本地地址 
					name: 'multipartFile',
					success: function(res) {
						console.log(res);
						let data = JSON.parse(res.data);
						if (data.result == true) {
							//let filename = "\"" + app.globalData.Link + "upload/static/" + data.url + "\""; 
							that.urls = that.urls.concat(data.url)
							upload_picture_list[j]['path_server'] = upload_picture_list[j].path;
						} else {
							let filename = "/assets/images/714.png" //错误图片显示
							upload_picture_list[j]['path_server'] = filename;
						}
						that.up_data(upload_picture_list);
					}
				})
				//上传 进度方法
				uplyk.onProgressUpdate((res) => {
					upload_picture_list[j]['upload_percent'] = res.progress;
					this.up_data(upload_picture_list)
				})
			},
			/** 是否隐藏图片选择 */
			chooseViewShow1() {
				if (this.imgArr.length >= this.ImgNumber) {
					this.chooseViewShow = false
				} else {
					this.chooseViewShow = true
				}
			},
			/** 显示图片 */
			showImage(e) {
				let imgArr = this.imgArr;
				let itemIndex = e.currentTarget.dataset.id;
				let img = [];
				for (let i = 0; i < imgArr.length; i++) {
					img.push(imgArr[i].path);
				}
				wx.previewImage({
					current: img[itemIndex] // 当前显示图片的http链接
				})

			},
			//图片点击事件
			imgYu(event) {
				console.log(event);
				let src = event.currentTarget.dataset.src; //获取data-src
				let imgList = [event.currentTarget.dataset.list]; //获取data-list
				//图片预览
				wx.previewImage({
					current: src, // 当前显示图片的http链接
					urls: imgList // 需要预览的图片http链接列表
				})
			},
			//备注
			areaBlur(e) {
				// console.log('失去焦点')
				let that = this;
				let value = e.detail.value;
				that.tfanlt = value;
			},
			//提交
			saveFormId: function(e) {
				let that = this;
				let url = "users/submitMaterial";
			
				if (that.imgArr.length == 0) {
					uni.showToast({
						title: '证件照不能为空',
						icon: 'none',
						type: 'warning'
					});
					return;
				}else if (that.enterDate =="" || that.enterDate == "年份" || that.college=="学院/部门") {
					uni.showToast({
						title: '请选择入学年份并依次选择学院和专业',
						icon: 'none',
						type: 'warning'
					});
					return;
				}else {
					let newTime = new Date(that.enterDate);
					let certificatePhotoPath = that.urls;
					console.log("certificatePhotoPath:", certificatePhotoPath);
					let majorDepartid = 0;
					if (that.majorDepart != null)
						majorDepartid = that.majorDepart.id;
						
					let params = {
						url: url,
						type: 'POST',
						data: {
							type: that.type,
							openid: that.openid,
							enterDate: that.enterDate,
							collegeid: that.college.id,
							majorDepartid: majorDepartid,
							certificatePhotoPath: certificatePhotoPath,
							brief: that.brief
						},
						sCallback: function(res) {
							console.log(res);
							if (res == "OK") {
								uni.showModal({
									content: '信息提交成功，等待审核！',
									showCancel: true
								})
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/hservice/hservice'
									})
								},1000);
								
								//app.wxlogin(that.openid);
							}
						}
					}
					app.request(params);
				}

			}
		}
	}
</script>

<style>
	.image-bg {
		position: fixed;
		width: 100%;
		height: 100%;
	}

	.page-bg {
		position: fixed;
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.sub-bg {
		width: 644rpx;
		height: 1180rpx;
		background: rgba(0, 0, 0, 0.45);
		border-radius: 18rpx;
	}

	.avater {
		margin-left: 212rpx;
		margin-top: 20rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
	}

	.tip {
		width: 100%;
		margin-top: 20rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		color: white;
		font-size: 28rpx;
	}

	.section {
		margin-left: 49rpx;
		margin-top: 20rpx;
		width: 550rpx;
		min-height: 76rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.section1 {
		margin-left: 49rpx;
		margin-top: 20rpx;
		width: 550rpx;
		min-height: 256rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.te {
		margin-left: 32rpx;
		color: #CDCDCD;
		font-size: 28rpx;
	}

	.section2 {
		margin-left: 49rpx;
		margin-top: 20rpx;
		width: 550rpx;
		min-height: 176rpx;
		background-color: white;
		border-radius: 16rpx;
	}

	.tx {
		margin-left: 32rpx;
		width: 510rpx;
		height: 200rpx;
	}

	.add {
		margin-top: 10rpx;
		padding-left: 32rpx;
		display: flex;
		background-color: #fff;
		height: 190rpx;
	}

	.add image {
		margin-top: 20rpx;
		margin-right: 8rpx;
		width: 160rpx;
		height: 160rpx;
	}

	.form_button {
		background-color: white;
		padding: 0;
		margin: 0;
		text-align: left;
		color: rgb(51, 51, 51);
	}

	.section input {
		margin-left: 32rpx;
		width: 400rpx;
		height: 76rpx;
		line-height: 76rpx;
		font-size: 28rpx;
	}

	.send-code-btn {
		margin-left: 260rpx;
		margin-top: -58rpx;
		height: 56rpx;
		width: 180rpx;
		font-size: 32rpx;
		text-align: center;
		color: #555555;
		z-index: auto;
	}

	.placeholder,
	.address-placeholder {
		color: rgb(187, 187, 187);
	}

	.address-bg {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}

	.address-normal {
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.department {
		color: rgb(187, 187, 187);
		margin-left: 32rpx;
		width: 360rpx;
		line-height: 40rpx;
		font-size: 28rpx;
		padding-top: 20rpx;
		padding-bottom: 18rpx;
	}

	.address-arrow {
		margin-left: 5rpx;
		margin-top: 23rpx;
		width: 15rpx;
		height: 29rpx;
	}

	button {
		margin-left: 49rpx;
		margin-top: 32rpx;
		width: 546rpx;
		height: 76rpx;
		background-color: rgb(90, 160, 245);
		border-radius: 16rpx;
		color: white;
		font-size: 32rpx;
	}

	.tip {
		height: 60rpx;
		padding-top: 52rpx;
	}
</style>
